<template>

  <div class="flex flex-col gap-2 w-6/12">
    <div class="flex flex-wrap gap-6">
      <div class="form-control">
        <label class="label">
          <span class="label-text text-sm font-semibold">日期范围选择器</span>
        </label>
        <date-range-picker v-model="searchForm.dates" />
      </div>
    </div>

    <div class="flex flex-wrap gap-6">
      <div class="form-control">
        <label class="label">
          <span class="label-text text-sm font-semibold">下拉列表</span>
        </label>
        <select class="select select-bordered input-md min-w-32 w-full" v-model="searchForm.type">
          <option :value="undefined">全部</option>
          <option v-for="item in types" :value="item.id">{{ item.name }}</option>
        </select>
      </div>
      <div class="form-control">
        <label class="label">
          <span class="label-text text-sm font-semibold">类型名称</span>
        </label>
        <input type="text" v-model="searchForm.name" placeholder="请输入类型名称"
               class="input input-md input-bordered"/>
      </div>
      <div class="form-control justify-self-center">
        <label class="label">
          <span class="label-text text-sm font-semibold"></span>
        </label>
        <button class="btn btn-square btn-outline btn-md btn-info" @click="loadData()" title="查询">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
          </svg>
        </button>
      </div>
    </div>
  </div>

</template>

<script setup>

function doSubmit(){
  console.log(form.value)
}

const searchForm = ref({})
const types = ref([{
  id: 1,
  name: "哈哈",
}, {
  id: 2,
  name: "嘎嘎",
}])

</script>

<style scoped>

</style>